<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"
    integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
  <script src="../../build/3Dmol.js"></script>
</head>

<body style="height: 100%">
  <div id="test38" style="width: 800px; height: 1200px; margin: 50px; position: relative"></div>
  <script>

    function callback(viewer) {
      return function () {
        viewer.setStyle({}, { cartoon: { color: "spectrum" } });
        console.log(viewer)
        viewer.render();
      }
    }
    var viewers = $3Dmol.createViewerGrid($("#test38"), { rows: 2, cols: 3, control_all: false }, {})
    console.log(viewers)
    for (var r = 0; r < viewers.length; r++) {
      for (var c = 0; c < viewers[0].length; c++) {
        var viewer = viewers[r][c];
        $3Dmol.download("pdb:1YCR", viewer, {}, callback(viewer));
      }
    }

    $3Dmol.download("pdb:1YCR", viewers[0][2], {}, function () {
      viewers[0][2].setStyle({}, { line: {} });
      viewers[0][2].setBackgroundColor("000000");
      viewers[0][2].spin("vz");
      viewers[0][2].render();
    });

    /*
    var viewer = $3Dmol.createViewer($("#test38"),{});

    $3Dmol.download("pdb:1MO8",viewer,{},function(){
           
        viewer.setStyle({}, {cartoon:{color:"spectrum"}});
            viewer.render();                    
        });
*/
  </script>
</body>

</html>